<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>喜只猫后台管理系统</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<#include "../common/header.html">

</head>
<body class="hold-transition login-page">
	<div class="login-box">
		<div class="login-logo">
			<b>喜只猫后台管理系统</b>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body" id="loginBoxBody">

			<input type="hidden" id="loginResponseId" value='${loginResponse!}'>

			<p class="login-box-msg">请登陆</p>
			<form action="/cloudpay/admin/user/loginAction" method="post" id="loginForm">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="username" placeholder="用户名"> 
					<span class="glyphicon glyphicon-envelope form-control-feedback" style="top: 0px;"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="password" placeholder="密码"> 
					<span class="glyphicon glyphicon-lock form-control-feedback" style="top: 0px;"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="validateCode" style="width: 100px; margin-right: 0px;"  placeholder="验证码"> 
					<img src="/cloudpay/imgValidate/create" style="width: 100px;height: 34px;top: 1px;right: 5px;position: absolute;" id="imgObj" onclick="changeImg();"/>
				</div>
				
				<div class="row">
					<div style="text-indent: 5px">
						<!-- 登录失败，账号或密码错误 -->
						<#if loginResponse??>
						<label class="control-label" for="inputError" style="color:#dd4b39;width: 370px;max-width: 500px"><i class="fa fa-times-circle-o"></i>${loginFailMsg}</label>
						</#if>
						
					</div>
				</div>
				<div class="row">
					<!-- /.col class="longError" class="col-xs-4" -->
					<div>
						<button type="submit" class="btn btn-primary btn-block btn-flat">登陆</button>
					</div>
				</div>

			</form>
		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->
</body>
<script>
	var loginResponse;
	if(!isEmpty($("#loginResponseId").val())) {
		 loginResponse = JSON.parse($("#loginResponseId").val());
	}
	var test = new Vue({
		data : {
			loginResponse : loginResponse
		},
		created : function() {

		},
		methods : {},
		mounted : function() {

		}
	}).$mount('#loginBoxBody');
	
	$(function() {
		//校验器
		var formValidator = $("#loginForm").validate(
				{
					onkeyup : false,
					focusInvalid : false,  //错误时,错误选项不会得到焦点
					focusCleanup : true,   //得到焦点时，清空错误提示信息
					rules : {						
						username : {
							required:true
						},
						password : {
							required:true
						},
						validateCode:{
							required:true,
							remote: {
							    url: "/cloudpay/imgValidate/validateCode",     //后台处理程序
							    type: "post",               //数据发送方式
							    dataType: "json"       //接受数据格式   		
							}
						}
					},
					messages : {		
						username : {
							required:"用戶名不能为空"
						},
						password : {
							required:"密码不能为空"
						},
						validateCode:{
							required:"不能为空",
							remote:"验证码错误"
						}
					}
				});
		
		  //检查是否被踢出
		  if(!isEmpty(GetQueryString("otherLogin"))) {
			  alert("你的账号在别处登录");
		  }
		  
		  //检查是否被踢出
		  if(!isEmpty(GetQueryString("resetPassword"))) {
			  alert("修改密码成功，请重新登录");
		  }
	});
	
	//改变校验码图片
	function changeImg() {
		var imgSrc = $("#imgObj");
		var src = imgSrc.attr("src");
		imgSrc.attr("src", chgUrl(src));
	}

	//时间戳   
	//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
	function chgUrl(url) {
		var timestamp = (new Date()).valueOf();
		url = url.substring(0, 28);
		if ((url.indexOf("&") >= 0)) {
			url = url + "×tamp=" + timestamp;
		} else {
			url = url + "?timestamp=" + timestamp;
		}
		return url;
	}
</script>
</html>